/* header start */
.header {
            /* height: 0.6667rem; */
            /* background-color: khaki; */
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10rem;
            margin: 0.2933rem auto 0;
        }
        .header .logo-wrap {
            /* border: 0.0133rem solid red; */
            flex:1;
            margin-left: 0.4533rem;
        }
        .header .search {
            /* border: 0.0133rem solid red; */
            margin-right: 0.6667rem;
        }
        .header .login {
            /* border: 0.0133rem solid red; */
            margin-right: 0.5467rem;
            width: 0.64rem;
            height: 0.64rem;
            background-color: #DBDBDB;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.2133rem;
            /* color: #FFFFFF; */
        }
        .header .login a {
            color: #FFFFFF;
        }
        .header .download {
            /* border: 0.0133rem solid red; */
            background-color: #FF9F00;
            width: 1.92rem;
            height: 0.64rem;
            font-size: 0.3333rem;
            color: #FFFFFF;
            border-radius: 0.1067rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 0.2533rem;
        }
        .header .logo-wrap .logo {
            width: 1.92rem;
        }
        .header .search .search-img {
            width: 0.48rem;
        }
        /* end header  */

        /* nav start */
        .nav{
            /* height: 1.3333rem; */
            /* background-color: khaki; */
            border-bottom: 0.0133rem solid #F3F3F3;
            margin: 0.6rem auto 0;
            padding-left: 0.4rem;
            width: 10rem;

        }


        .nav .swiper-slide a {
            color: #6B6B6B;
            font-size: 0.3733rem;
            font-weight: 400;
            padding-bottom: 0.28rem;
            display: inline-block;
            border-bottom: 0.0267rem solid transparent;
        }
        .nav .swiper-slide a.active{
            color: #000;
            border-bottom: 0.0267rem solid #FF9F00;
        }
        /* end nav */

        /* banner start */
        .banner{
            width: 9.4933rem;
            height: 3.1467rem;
            background-color: #F3F3F3;
            margin: 0.2533rem auto 0.24rem;
        }
        .banner .swiper {
            --swiper-pagination-bullet-horizontal-gap: 0.08rem;
        }
        .banner .swiper-slide {
            height: 3.1467rem;
        }
        .banner .swiper-pagination-bullet {
            width: 0.2rem;
            height: 0.08rem;
            background-color: #FFFFFF;
            /* opacity: 0.2; */
            border-radius: 0;
        }
        /* banner end */

                /* menu start */
        .menu {
            width: 9.4933rem;
            /* min-height: 4.1867rem; */
            background-color: #F7F7F7;
            margin: 0 auto;
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
            border-radius: 0.1067rem;
            margin-bottom: 0.24rem;
        }
        .menu ul {
            display: flex;
            flex-wrap: wrap;
            row-gap: 0.48rem;
        }
        .menu ul li{
            width: 20%;
            /* min-height: 1.3333rem; */
            /* border: 0.0133rem solid #000; */
        }
        .menu ul li a {
            display: flex;
            flex-direction: column;
            row-gap: 0.2667rem;
            align-items: center;
            justify-content: center;
        }
        .menu ul li img {
            width: 1.0133rem;
            height: 1.0133rem;
        }
        .menu ul li p {
            font-size: 0.2933rem;
            color: #6B6B6B;
        }
        /* menu end */

        /* tabs start */
        .main {
            /* background-color: #fff; */
            min-height: 10.6667rem;
        }
        .tabs {
            background-color: #F7F7F7;
            border-radius: 0.1067rem;
        }
        .tabs .tabs-header {
            height: 1.3867rem;
            /* background-color: pink; */
            display: flex;
            align-items: center;
            padding-left: 0.16rem;
            column-gap: 0.3733rem;
        }
        .tabs .tabs-header-item {
            border: 0.0133rem solid #6B6B6B;
            width: 1.5733rem;
            height: 0.5867rem;
            text-align: center;
            line-height: 0.5867rem;
            font-size: 0.2933rem;
            color: #6c6c6c;
            border-radius: 0.2933rem;
            padding-left: 0.04rem;
            padding-right: 0.04rem;
        }
        .tabs .tabs-header-item.active {
            border-color: #FF9F00;
            color: #FF9F00;
            font-weight: 400;

        }

        .tabs .tabs-content .tabs-content-item {
            /* min-height: 2.6667rem; */
            /* border: 0.0133rem solid #000; */
            display: none;
        }
        .tabs .tabs-content-item .swiper {
            height: 4rem;
        }
        .common-card {
            /* border: 0.0133rem solid red; */
            border-radius: 0.1067rem;
        }
        .common-card .img {
            height: 2.5867rem;
            /* background-color: skyblue; */
            position: relative;
        }
        .common-card .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .common-card .img .card-info {
            width: 100%;
            height: 0.7467rem;
            /* border: 0.0133rem solid skyblue; */
            background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            color: #fff;
            display: flex;
            justify-content: space-between;
            padding:0.2rem 0 0.1867rem 0;
            padding-left: 0.16rem;
            padding-right: 0.16rem;

        }
        .common-card .img .card-info span {
            /* border:0.0133rem solid #fff; */
            padding-left: 0.5333rem;
            font-size: 0.32rem;
            line-height: 0.2933rem;
            /* font-weight: 400; */
        }
        .common-card .img .card-info .play-count {
            background-image: url(../images/icon-paly.png);
            background-repeat: no-repeat;
            background-size: 0.4rem 0.3467rem;
        }
        .common-card .img .card-info .number {
            background-image: url(../images/icon-number.png);
            background-repeat: no-repeat;
        }
        .common-card .title {
            box-sizing: content-box;
            font-size: 0.32rem;
            color: #000;
            line-height: 0.48rem;
            height: 0.96rem;
            padding-top: 0.1067rem;
            margin-bottom: 0.1333rem;
            padding-left: 0.16rem;
            padding-right: 0.16rem;
            /* border: 0.0133rem solid #E5E5E5; */

        }
        /* tabs end */

        /* recommend-list start */
        .recommend-list {
            /* min-height: 4rem; */
            background-color: #F7F7F7;
            margin-top: 0.24rem;
            border-radius: 0.1067rem;
        }
        .recommend-list ul li {
            /* border: 0.0133rem solid skyblue; */
            padding: 0.2667rem 0 0.2667rem 0;
            margin: 0 0.2667rem;
            border-bottom: 0.0133rem solid #E6E6E6;
        }
        .recommend-list ul li a {
            display: flex;
            align-items: center;
        }
        .recommend-list ul li:last-child {
            border-bottom: none;
        }
        .recommend-list ul li .img {
            width: 1.0133rem;
            height: 1.0133rem;
            background-color: pink;
            flex-shrink: 0;
        }
        .recommend-list ul li .info {
            flex: 1;
            min-width: 0;
            /* max-width: 6.6667rem; */
            /* background-color: skyblue; */
            min-height: 1.0133rem;
            margin-left: 0.24rem;
            margin-right: 0.3067rem;
        }
        .recommend-list ul li .play-button {
            width: 0.5867rem;
            height: 0.5867rem;
            /* background-color: pink; */
            background-image: url(../images/icon-play2.png);
            background-size: cover;
            flex-shrink: 0;
        }
        .recommend-list ul li .info .title {
            font-size: 0.3467rem;
            color: #FF9F00;
            font-weight: 400;
            line-height: 1;
            /* border: 0.0133rem solid red; */
        }
        .recommend-list ul li .info .desc {
            font-size: 0.2933rem;
            color: #333333;
            font-weight: 400;
            line-height: 1;
            /* border: 0.0133rem solid red; */
            margin-top: 0.3067rem;
        }
        /* end recommend-list */

        /* history start */
        .history {
            /* min-height: 4rem; */
            background-color: #F7F7F7;
            margin-top: 0.24rem;
            border-radius: 0.1067rem;
        }

        .history .history-header {
            height: 1.0933rem;
            /* background-color: skyblue; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.2667rem;
        }

        .history .history-header .title {
            font-size: 0.4533rem;
            color: #000000;
            font-weight: bold;
        }

        .history .history-header a {
            font-size: 0.3467rem;
            color: #B9B9BD;
            font-weight: 400;
            padding-right: 0.32rem;
            background-image: url(./images/arrow-right.png);
            background-repeat: no-repeat;
            background-position: right center;
            /* border: 0.0133rem solid skyblue; */
            background-size: 0.1467rem
        }
        .history .swiper-slide {
            width: 2.2667rem;
            /* border: 0.0133rem solid #B9B9BD; */
        }

        .history .swiper-slide .img-warp {
            width: 2.2667rem;
            height: 3.04rem;
            /* background-color: skyblue; */
        }

        .history .swiper-slide .img-warp img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .history .swiper-slide .title {
            font-size: 0.32rem;
            color: #000000;
            font-weight: 400;
            /* padding: 0.16rem 0 0 0.16rem; */
            line-height: 0.48rem;
            height: 0.96rem;
            margin-top: 0.1333rem;
            margin-bottom: 0.1467rem;
        }
        /* history end */

        /* information list start */
                .information-list {
            /* min-height: 9.3333rem; */
            /* background-color: #F7F7F7; */
            margin-top: 0.24rem;
            margin-bottom: 1.4667rem;
        }
        .information-list ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            column-gap: 0.2533rem;
        }
        .information-list ul li {
            width: 4.6133rem;
            min-height: 4rem;
            /* border: 0.0133rem solid #E5E5E5; */
        }
        .information-list .common-card p.title {
            /* margin-bottom: 0.16rem; */
        }
        /* end information list */
        
        /* tabber start */
        .tabber {
            width: 10rem;
            height: 1.3333rem;
            background-color: #fff;
            box-shadow: 0rem -0.0267rem 0.1333rem 0rem rgba(0, 0, 0, 0.1);
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            z-index: 999;
        }
        .tabber ul {
            display: flex;
            justify-content: space-between;
            /* align-items: center; */
            padding: 0.1733rem 0.52rem 0;
        }
        .tabber ul li {
            /* border: 0.0133rem solid #000; */
        }
        .tabber ul li a {
            display: flex;
            flex-direction: column;
            /* align-items: center; */
        }
        .tabber ul li a span {
            font-size: 0.32rem;
            color: #000;
            font-weight: 400;
            line-height: 1;
            /* border: 0.0133rem solid #000; */
            /* padding-top: 0.1333rem ; */

        }
        .tabber .icon {
            height: 0.5333rem;
            background-repeat: no-repeat;
            background-position: top center;
            background-size: auto 0.4933rem;
            margin-bottom: 0.1067rem;
            /* border: 0.0133rem solid #000; */
        }
        .tabber ul li.active a span {
            color: #FF9F00;
        }
        .tabber .icon1 {
            background-image: url(../images/tabber1.png);

        }
        .tabber .icon2 {
            background-image: url(../images/tabber2.png);
        }
            
        .tabber .icon3 {
            background-image: url(../images/tabber3.png);
        }
        .tabber .icon4 {
            background-image: url(../images/tabber4.png);
        }
        .tabber ul li.add a {
            display: block;
            width: 1.0533rem;
            height: 1.04rem;
            background-color: #FF9F00;
            border-radius: 0.3867rem;
            background-image: url(../images/add.png);
            background-position: center center;
            background-size: 0.4667rem 0.4667rem;
            background-repeat: no-repeat;
        }
        /* end tabber */
